<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        var userStr = sessionStorage.getItem("user");
        var user;
        if (userStr) {
            user = JSON.parse(userStr);
        }
        var greatStatus;//点赞状态
        var enshrineStatus;//收藏状态
        var signId; //标记对象的id
        var author;//作者id
        var state = false;//关注状态 true代表已关注
        var id = getParams().id;//游记id
        $(function () {
            $.get(baseUrl + "travels/" + id, function (data) {
                author = data.author;
                $(".travels").renderValues(data);
                var json = {"id": getParams().id, "browseNum": data.browseNum + 1};
                $.ajax({
                    type: "PUT",
                    url: baseUrl + "/travels/updateBrowseNum",
                    data: json
                });
                //查询游记数量
                $.get(baseUrl + "users/" + author.id + "/travels/nums", function (data) {
                    $("#travels-tab").html(data);
                });
                //查询关注数和粉丝数
                $.get(baseUrl + 'users/fans/' + author.id, function (data) {
                    $("#lookFans").html(data);
                });
                //判断是否是自己的,是自己的就隐藏关注按钮和私信按钮

                if (user) {
                    if (user.id == author.id) {
                        $("#followBtn").remove();
                    }
                $.get(baseUrl + 'users/' + author.id + '/' + user.id, function (data) {
                    if (data.success) {
                        $("#followBtn").html("取消关注");
                        state = true;
                    }
                });
                }
                //关注按钮
                $("#followBtn").click(function () {
                    if (!user) {
                        alert("请先登录")
                        window.location.href = "/login.html";
                    }
                    if (!state) {
                        //未关注添加关注关系并修改按钮提示
                        $.post(baseUrl + '/users/' + author.id + '/' + user.id, function (data) {
                            $("#followBtn").html("取消关注");
                            state = true;//改成已关注

                        })

                    } else {
                        //关注状态则删除关注关系并修改按钮提示
                        $.ajax({
                            url: baseUrl + '/users/' + user.id,
                            method: 'delete',
                            success: function (data) {
                                $("#followBtn").html("关注");
                                state = false;//改成未关注
                            }
                        })
                    }
                    window.location.reload()
                })



            });


            //如果是用户查询标记状态
            if (user) {
                $.get(baseUrl + "travelSigns/" + id, function (data) {
                    if (data) {
                        //如果有新建过sign对象获取id
                        signId = data.id;

                    }
                    //回显标记状态
                    if (data.greatStatus) {
                        $(".great").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                        greatStatus = true;
                    }
                    if (data.enshrineStatus) {
                        $(".enshrine").removeClass("fa-heart-o").addClass("fa-heart");
                        enshrineStatus = true;
                    }
                });

            }
            //查询当前攻略的点赞和收藏总数
            $.get(baseUrl + "travelSigns/count/" + id, function (data) {
                //渲染数据
                $(".getNum").renderValues(data);

            });
            //查询评论总数,并回显
            $.get(baseUrl + "travelComments/" + id, function (data) {
                $("#commentBtn").html(data)
            });

            //绑定点赞和收藏点击效果
            $(".enshrine").click(function () {
                //如果不是用户跳转到登录页面
                if (!user) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '登录之后才能收藏哦!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html";
                        }
                    });

                } else {
                    //如果是用户则改变收藏的动画效果并改变收藏的状态
                    changeClass($(this), "fa-heart-o", "fa-heart");
                    enshrineStatus = !enshrineStatus;
                    var json = {
                        'travel.id': id,
                        enshrineStatus: enshrineStatus,
                        greatStatus: greatStatus,
                        'author.id': author.id,
                        'author.nickName': author.nickName,
                        'author.headImgUrl': author.headImgUrl,
                        'type': 0
                    };
                    //发送请求更新用户的标记状态和更新大攻略的收藏总数
                    if (!signId) {//根据标记对象id判断是发送新增还是更新请求
                        //新增
                        $.post(baseUrl + "travelSigns", json, function (data) {
                            $("#enshrineNum").html(data.data.enshrineStatus);
                        });

                        //新增操作要生成一个状态id来判断下次是更新操作
                        $.get(baseUrl + "travelSigns/" + id, function (data) {
                            if (data) {
                                //如果有新建过sign对象获取id
                                signId = data.id;

                            }
                        });
                        $.get(baseUrl + "travelSigns/count/" + id, function (data) {
                            //回显收藏总数
                            $("#enshrineNum").html(data.greatStatus);
                        });

                    } else {
                        //更新
                        $.ajax({
                            url: baseUrl + "travelSigns/" + signId,
                            method: "put",
                            data: json,
                            success: function (data) {
                                //回显收藏总数
                                $("#enshrineNum").html(data.data.enshrineStatus);
                            }
                        })

                    }

                }
            });
            $(".great").click(function () {
                if (user) {
                    //如果是用户则改变点赞的动画效果并改变点赞的状态
                    changeClass($(this), "fa-thumbs-o-up", "fa-thumbs-up");
                    greatStatus = !greatStatus;
                    var json = {
                        'travel.id': id,
                        enshrineStatus: enshrineStatus,
                        greatStatus: greatStatus,
                        'author.id': author.id,
                        'author.nickName': author.nickName,
                        'author.headImgUrl': author.headImgUrl,
                        'type': 1

                    };
                    //发送请求更新用户的标记状态和更新大攻略的点赞总数
                    if (!signId) {//根据标记对象id判断是发送新增还是更新请求
                        //新增
                        $.post(baseUrl + "travelSigns", json, function (data) {
                            if (data.success) {
                                //新增操作要生成一个状态id来判断下次是更新操作
                                $.get(baseUrl + "travelSigns/" + id, function (data) {
                                    if (data) {
                                        //如果有新建过sign对象获取id
                                        signId = data.id;

                                    }
                                })
                                //更新点赞总数
                                $("#greatNum").html(data.data.greatStatus);
                            }
                        })


                    } else {
                        //更新
                        $.ajax({
                            url: baseUrl + "travelSigns/" + signId,
                            method: "put",
                            data: json,
                            success: function (data) {
                                if (data.success) {
                                    //更新点赞总数
                                    $("#greatNum").html(data.data.greatStatus);
                                }
                            }
                        })
                    }
                } else {
                    //如果不是用户跳转到登录页面
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '登录之后才能点赞哦!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html";
                        }
                    });


                }
            });
            //绑定评论按钮事件
            $("#commentBtn").click(function () {
                window.location.href = "/mine/travelComment.html?id=" + id;
            })
        })

    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span render-html="browseNum"> 0</span>
            回复 <span render-html="commentNum"> 0</span>
        </small>
        <div class="row">
            <div class="col-4 img">
                <img class="rounded-circle" render-src="author.headImgUrl" style="width: 80%">

            </div>
            <div class="col-4 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <br>
                    <span id="travels-tab">0 </span>篇游记
                    <span id="lookFans">0 </span>粉丝
                    <button class="btn" id="followBtn">关注</button>
                </small>
            </div>
            <div class="attention col-4">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="persons"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex getNum">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up great" id="greatNum" render-html="greatStatus"></i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o handleBtn" id="commentBtn"
                                       render-html="commentNum"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-heart-o enshrine" id="enshrineNum" render-html="enshrineStatus"></i>
        </div>
    </div>
</div>


</body>

</html>